<template>
    <div class="box">
        <div class="add-top">
            <div class=head-title>
                添加试题
            </div>
            <div class="top-right">
                <el-button type="primary" class="button" @click="addBank">录入</el-button>
                <i class="iconfont icon-shuaxin1" @click="clear"></i>
            </div>
        </div>
        <div class="box-body">
            <el-form class="questions-head" ref="ruleFormRef" :model="quesHeadData" :rules="rules">
                <div class="option">
                    <span class="option-word">所属课程</span>
                    <el-form-item prop="belongCourseId">
                        <el-select v-model="quesHeadData.belongCourseId" class="select" placeholder="请选择课程"
                            size="small">
                            <el-option v-for="item in quesHeadData.courses" :label="item.label" :value="item.value"
                                @click="setBelongCourseId(item.value)" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="option">
                    <span class="option-word">试题类型</span>
                    <el-form-item prop="quesType">
                        <el-select v-model="quesHeadData.quesType" class="select" placeholder="请选择题型" size="small">
                            <el-option v-for="item in categories" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="option">
                    <span class="option-word">试题难度</span>
                    <el-form-item prop="difficultLevel">
                        <el-select v-model="quesHeadData.difficultLevel" class="select" placeholder="请选择难度"
                            size="small">
                            <el-option v-for="item in difficulties" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="option">
                    <span class="option-word">知识点</span>
                    <el-form-item prop="knowledge">
                        <el-select v-model="quesHeadData.knowledge" multiple collapse-tags collapse-tags-tooltip
                            :max-collapse-tags="3" class="multiple-select" placeholder="请选择知识点" size="small">
                            <el-option v-for="item in quesHeadData.knowledgeName" :label="item.knowledgeName"
                                :value="item.knowledgeId" class="multiple-option" />
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>

            <choice v-if="quesHeadData.quesType == 0" ref="childRefChoice" @choiceChild-click="choicePostData" />
            <tianKong v-if="quesHeadData.quesType == 1" ref="childRefTianKong"
                @tianKongChild-click="tianKongPostData" />
            <tureFalse v-if="quesHeadData.quesType == 2" ref="childRefTureFalse"
                @tureFalseChild-click="tureFalsePostData" />
            <shortAnswer v-if="quesHeadData.quesType == 3" ref="childRefShortAnswer"
                @shortAnswerChild-click="shortAnswerPostData" />
            <material v-if="quesHeadData.quesType == 4" ref="childRefMaterial"
                @materialChild-click="materialPostData" />

            <!-- <div class="info4">
            <el-button type="info" class="button" @click="clear">重置</el-button>
            <el-button type="primary" class="button" @click="addBank">录入</el-button>
        </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCourseListAPI, postAddBankAPI, getBatchPointAPI } from '@/api/api.js'
import choice from './questions/choice.vue';
import tianKong from './questions/tianKong.vue';
import tureFalse from './questions/tureFalse.vue';
import shortAnswer from './questions/shortAnswer.vue';
import material from './questions/material.vue';
import { ElMessage } from 'element-plus';


const router = useRouter()
const route = useRoute()


const quesHeadData = ref({
    //题目类型
    quesType: '',
    //所属课程
    belongCourseId: '',
    //难度
    difficultLevel: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
    //知识点（名+id）
    knowledgeName: [],
    //选中的知识点id
    knowledge: []
})
//知识点（所有数据）
const knowledgeData = ref([])
const ruleFormRef = ref(null)
const rules = reactive({
    quesType: [
        { required: true, message: "请选择题目类型", trigger: 'change' },
    ],
    belongCourseId: [
        { required: true, message: "请选择所属课程", trigger: 'change' },
    ],
    difficultLevel: [
        { required: true, message: "请选择题目难度", trigger: 'change' },
    ],
    knowledge: [
        { required: true, message: "请选择知识点", trigger: 'change' },
    ],
})

onMounted(() => {
    quesHeadData.value.quesType = 0
    //获取课程信息
    getCourseList()
})
const setBelongCourseId = (id) => {
    sessionStorage.setItem('courseId', id)
    //获取知识点
    getBankListCourse(sessionStorage.getItem('courseId'))
}

//难度
const difficulties = reactive([
    {
        label: "简单",
        value: 0,
    },
    {
        label: "中等",
        value: 1
    },
    {
        label: "困难",
        value: 2
    },
])
//题型
const categories = reactive([

    {
        label: "选择题",
        value: 0,
    },
    {
        label: "填空题",
        value: 1,
    },
    {
        label: "判断题",
        value: 2,
    },

    {
        label: "简答题",
        value: 3,
    },
    {
        label: "材料题",
        value: 4,
    },
])
const pageNum = ref(1)
const pageSize = ref(20)

//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            quesHeadData.value.courseList = res.data.data.list
            console.log(res.data.data);
            getCourseName(quesHeadData.value.courseList)
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        quesHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程查询知识点
const getBankListCourse = async (id) => {
    console.log(id, 'id');
    const keyWord = ''
    await getBatchPointAPI(id, 1, 20, keyWord).then(res => {
        if (res.data.code == 200) {
            knowledgeData.value = res.data.data.list
            getKnowledgeName(knowledgeData.value)
        }
    })
}
//获取知识点名
const getKnowledgeName = (knowledge) => {
    for (let item of knowledge) {
        quesHeadData.value.knowledgeName.push({
            knowledgeName: item.knowledgeName,
            knowledgeId: item.konwledgeId
        })
    }
    console.log(quesHeadData.value.knowledgeName);
}

//父组件触发子组件中的方法
const childRefChoice = ref();
const childRefTianKong = ref();
const childRefTureFalse = ref();
const childRefShortAnswer = ref();
const childRefMaterial = ref();

const addData = ref()
//接收从子组件传来的数据
const choicePostData = (data) => {
    data.splice(0, 0, {
        belongCourseId: quesHeadData.value.belongCourseId,
        difficultLevel: quesHeadData.value.difficultLevel,
        questionType: 0,
        knowledge: quesHeadData.value.knowledge,
        description: "这是一道选择题"
    })
    addData.value = Object.assign(data[0], data[1])
    postAddBank(addData.value)

}
const tianKongPostData = (data) => {
    data.splice(0, 0, {
        belongCourseId: quesHeadData.value.belongCourseId,
        questionType: 1,
        difficultLevel: quesHeadData.value.difficultLevel,
        knowledge: quesHeadData.value.knowledge,
        outOfOrder: 1,
    })
    addData.value = Object.assign(data[0], data[1])
    postAddBank(addData.value)

}
const tureFalsePostData = (data) => {
    data.splice(0, 0, {
        belongCourseId: quesHeadData.value.belongCourseId,
        questionType: 2,
        difficultLevel: quesHeadData.value.difficultLevel,
        knowledge: quesHeadData.value.knowledge,
    })
    addData.value = Object.assign(data[0], data[1])
    postAddBank(addData.value)

}
const shortAnswerPostData = (data) => {
    console.log('0000000000');
    data.splice(0, 0, {
        belongCourseId: quesHeadData.value.belongCourseId,
        questionType: 3,
        difficultLevel: quesHeadData.value.difficultLevel,
        knowledge: quesHeadData.value.knowledge,
    })
    addData.value = Object.assign(data[0], data[1])
    postAddBank(addData.value)

}
const materialPostData = (data) => {
    data.splice(0, 0, {
        belongCourseId: quesHeadData.value.belongCourseId,
        questionType: 4,
        difficultLevel: quesHeadData.value.difficultLevel,
        knowledge: quesHeadData.value.knowledge,
    })
    addData.value = Object.assign(data[0], data[1])
    postAddBank(addData.value)

}

//添加（父组件触发子组件中的方法）
const addBank = () => {
    if (quesHeadData.value.quesType == 0) {
        childRefChoice.value.choiceData();
    }
    else if (quesHeadData.value.quesType == 1) {
        childRefTianKong.value.tianKongData();
    }
    else if (quesHeadData.value.quesType == 2) {
        childRefTureFalse.value.tureFalseData();
    }
    else if (quesHeadData.value.quesType == 3) {
        childRefShortAnswer.value.shortAnswerData();
    }
    else if (quesHeadData.value.quesType == 4) {
        childRefMaterial.value.materialData();
    }
}



// 添加题目
const postAddBank = (data) => {
    console.log(data, 'data111111');
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            console.log("通过2");
            //触发成功验证表单，调用接口；
            await postAddBankAPI(data).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success('添加题目成功')
                    router.push({
                        name: 'question'
                    })
                }
            })
        } else {

            console.log("未通过");
        }
    });

}
//重置（父组件触发子组件中的方法）
const clear = () => {
    if (quesHeadData.value.quesType == 0) {
        childRefChoice.value.choiceClearData();
    }
    else if (quesHeadData.value.quesType == 1) {
        childRefTianKong.value.tianKongClearData();
    }
    else if (quesHeadData.value.quesType == 2) {
        childRefTureFalse.value.tureFalseClearData();
    }
    else if (quesHeadData.value.quesType == 3) {
        childRefShortAnswer.value.shortAnswerClearData();
    }
    else if (quesHeadData.value.quesType == 4) {
        childRefMaterial.value.materialClearData();
    }
    quesHeadData.value.difficultLevel = ''
    quesHeadData.value.belongCourseId = ''
    quesHeadData.value.knowledge = []
}


</script>

<style lang="less" scoped>
.box {
    background-color: #fff;
    margin: 15px 0;
    border-radius: 15px;

    .add-top {
        display: flex;
        justify-content: space-between;
        padding: 10px 100px;


        .head-title {
            font-size: 18px;
            font-weight: 550;
            color: grey;
        }

        .top-right {
            display: flex;

            .button {
                width: 100px;
                padding: 15px;
                margin: 0 20px 0px 10px;

            }

            .icon-shuaxin1 {
                color: grey;
                margin-top: 5px
            }
        }


    }

    .box-body {
        height: calc(100vh - 148px);
        background-color: #fff;
        border-radius: 15px;
        padding: 0 120px;

        .questions-head {
            display: flex;
            margin: 0 10px;
            padding-top: 10px;
            font-size: small;
            border-bottom: 1px solid rgb(243, 242, 242);

            .option {
                display: flex;
                padding: 10px;

                .option-word {
                    margin-top: 3px;
                    padding: 5px;
                    font-size: 14px;
                }

                .select {
                    padding-top: 6px;
                    width: 100px;
                }

                .multiple-select {
                    padding-top: 6px;
                    width: 240px;

                    .multiple-option {}
                }
            }
        }
    }


}
</style>